@bg-color: #ff2442; // 主背景色
@particle-color: #fff; // 粒子颜色

.particle-container {
  width: 100%;
  min-height: 350rpx;
  background-color: @bg-color;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  // 简洁底部边缘，无额外装饰
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  // 粒子容器
  .particles-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  // 粒子样式
  .particle {
    position: absolute;
    border-radius: 50%;
    background-color: @particle-color;
    opacity: 0.6;
    animation: float linear infinite;
  }

  // 粒子位置与动画设置
  .p1 { width: 4rpx; height: 4rpx; left: 10%; top: 20%; animation-duration: 12s; }
  .p2 { width: 6rpx; height: 6rpx; left: 80%; top: 30%; animation-duration: 15s; animation-delay: 1s; }
  .p3 { width: 3rpx; height: 3rpx; left: 30%; top: 70%; animation-duration: 10s; animation-delay: 0.5s; }
  .p4 { width: 5rpx; height: 5rpx; left: 60%; top: 20%; animation-duration: 14s; animation-delay: 2s; }
  .p5 { width: 2rpx; height: 2rpx; left: 20%; top: 50%; animation-duration: 11s; animation-delay: 0.8s; }
  .p6 { width: 7rpx; height: 7rpx; left: 90%; top: 60%; animation-duration: 16s; animation-delay: 3s; }
  .p7 { width: 4rpx; height: 4rpx; left: 50%; top: 10%; animation-duration: 9s; animation-delay: 1.2s; }
  .p8 { width: 3rpx; height: 3rpx; left: 70%; top: 80%; animation-duration: 13s; animation-delay: 1.5s; }
  .p9 { width: 5rpx; height: 5rpx; left: 40%; top: 40%; animation-duration: 17s; animation-delay: 2.3s; }
  .p10 { width: 6rpx; height: 6rpx; left: 15%; top: 90%; animation-duration: 10s; animation-delay: 2.8s; }
  .p11 { width: 2rpx; height: 2rpx; left: 65%; top: 15%; animation-duration: 14s; animation-delay: 0.3s; }
  .p12 { width: 4rpx; height: 4rpx; left: 25%; top: 60%; animation-duration: 12s; animation-delay: 1.7s; }
  .p13 { width: 3rpx; height: 3rpx; left: 85%; top: 40%; animation-duration: 15s; animation-delay: 2.5s; }
  .p14 { width: 5rpx; height: 5rpx; left: 5%; top: 30%; animation-duration: 11s; animation-delay: 3.2s; }
  .p15 { width: 4rpx; height: 4rpx; left: 55%; top: 75%; animation-duration: 13s; animation-delay: 1.1s; }

  // 内容区域
  .header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40rpx 20rpx;
	// padding-top: 170rpx;
  }

  .header-title text {
    font-size: 56rpx;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  }

  .header-subtitle {
    margin-top: 20rpx;
    text {
      font-size: 30rpx;
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

// 粒子浮动动画
@keyframes float {
  0% { transform: translate(0, 0); opacity: 0.4; }
  25% { transform: translate(-30rpx, 20rpx); opacity: 0.8; }
  50% { transform: translate(-60rpx, 0); opacity: 0.6; }
  75% { transform: translate(-20rpx, -20rpx); opacity: 0.7; }
  100% { transform: translate(0, 0); opacity: 0.4; }
}